<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>商品</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="nav">
            <ul id="nav-ul"></ul>
        </div>
        <div class="goods">
            <ul id="goods-ul"></ul>
        </div>
    </body>
    <script type="text/javascript">
        var navUl = document.getElementById("nav-ul");
        var goodsUl = document.getElementById("goods-ul");
        $.ajax({
        "url": 'http://lc.shudong.wang/api_cat.php',
        "type": "GET",
        "dataType": "json",
        "success": function(response){
          console.log(response);
          for (var i = 0; i < response.data.length; i++) {
            var obj = response.data[i];
            var oLi = document.createElement('li');
            var oA = document.createElement('a');
            oA.innerText = obj.cat_name;
            oA.href = "list.html?cat_id=" + obj.cat_id;
            oLi.appendChild(oA);
            navUl.appendChild(oLi);
          }
        },
        "error": function(message) {
          //
          console.log(message);
        }
      });

      $.ajax({
        "url": 'http://lc.shudong.wang/api_goods.php',
        "type": "GET",
        "dataType": "json",
        "success": function(response){
          console.log(response);
          for (var i = 0; i < response.data.length; i++) {
            var obj = response.data[i];
            var oLi = document.createElement('li');
            if (i % 5 === 4) {
              oLi.className += " diy";
            }
            var oImage = document.createElement('img');
            oImage.src = obj.goods_thumb;
            var oP = document.createElement('p');
            oP.innerText = obj.goods_name;
            oLi.appendChild(oImage);
            oLi.appendChild(oP);
            goodsUl.appendChild(oLi);
          }
        },
        "error": function(message) {
          //
          console.log(message);
        }
      });
    </script>
</html>